<template>
    <div style="width:100%; height: 100%;" v-if="mobileApp">
        <div ref="mapRef" style='position: absolute; width:100%; height: 100%; z-index: 100'></div>
    </div>
</template>

<script>
/**
 * GIS地图
 */
// #ifdef H5
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import FormCustomPublic from "../FormCustomPublic";
import BusEvent from "../BusEvent";
import rxAjax from '@/assets/ajax.js';
// #endif
export default {
    name: "gisMapView",
    // #ifdef H5
    mixins:[FormCustomPublic,BusEvent],
    // #endif
    data() {
        return {
            mapConfig:{
                center:"",
                level:11,
                tileLayer:{
                    vecUrl:"",
                    cvaUrl:"",
                },
                projectionType:"w",
            },
            rxAjax:rxAjax,
            mapItem:"",
            layerGroup:"",
            genJsonLayer:"",
            mobileApp:false
        }
    },
    created(){
        // #ifdef H5
        this.mobileApp = true
        // #endif
        if(this.config){
            this.mapConfig = Object.assign(this.mapConfig,this.config);
        }
    },
    mounted(){
        // #ifdef H5
        // 初始化地图 默认中心为广州
        let center=[23.1291,113.2644];
        if(this.mapConfig.center){
            center=this.mapConfig.center.trim().split(",");
        }
        let level= this.mapConfig.level || 11;
        this.mapItem = L.map(this.$refs.mapRef).setView(center, level);
        this.mapItem.on('dblclick', this.onMapDblClick);
        this.layerGroup = L.layerGroup().addTo(this.mapItem);
        this.init();
        // #endif
    },
    methods: {
        init(){
            // 清空图层组中的所有图层
            this.layerGroup.clearLayers();
            // 定义天地图WMTS服务的URL模板
            if(!this.mapConfig.tileLayer){
                return;
            }
            let vecUrl = this.mapConfig.tileLayer.vecUrl || "";
            let cvaUrl = this.mapConfig.tileLayer.cvaUrl || "";
            let projectionType = this.mapConfig.projectionType || "w";
            // 添加矢量图层
            this.layerGroup.addLayer(
                L.tileLayer(vecUrl, {
                    layer: 'vec', // vec: 矢量图层, cva: 矢量注记, img: 影像图层, cia: 影像注记
                    proj: projectionType, // w: Web墨卡托投影, c: 大地坐标系
                    index: '0', // 天地图服务器索引（0-7）
                    tileSize: 256,
                    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                })
            )
            // 添加矢量注记图层
            this.layerGroup.addLayer(
                L.tileLayer(cvaUrl, {
                    layer: 'cva', // 矢量注记图层
                    proj: projectionType, // Web墨卡托投影
                    index: '0', // 服务器索引
                    tileSize: 256,
                    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                })
            )
            L.Util.requestAnimFrame(this.mapItem.invalidateSize,this.mapItem,!1,this.mapItem._container);
        },
        /**
         * GeoJSON 图层
         * geoJsonData
         * style :{
                    color: '#E066FF',
                    fillOpacity: 0,
                    weight: 4,
                }
         **/
        addGeoJsonData(geoJsonData,style){
            if(!geoJsonData || geoJsonData.length==0) return;
            this.genJsonLayer = L.geoJSON(geoJsonData, {
                style: style,
            });
            this.mapItem.addLayer(this.genJsonLayer);
        },
        /**
         * 清空 GeoJSON图层
         * */
        clearGeoJsonData(){
            if(!this.genJsonLayer){
                return;
            }
            this.mapItem.removeLayer(this.genJsonLayer);
        },
        /**
         * 处理页面定制公共事件
         * @param args
         */
        handPublicReceive(args){
            //排除列表的formEvent事件
            if(args.eventKey == "formEvent" || !this.config.receive.funcScript){
                return;
            }
            let func=new Function("row","callback",this.config.receive.funcScript);
            func.bind(this)(args.params, this.addGeoJsonData);
        },
        /**
         * 地图双击事件
         * @param e
         */
        onMapDblClick(e){
            let func=new Function("e",this.config.publish.funcScript);
            func.bind(this)(e);
        }
    },
    watch: {
        config:{
            handler(){
                this.init();
            },
            deep:true,
        }
    }
}
</script>

<style scoped>

</style>
